<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
		 pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>员工列表</title>

	<!-- web路径：
    不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
    以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
            http://localhost:3306/crud
     -->

	<script type="text/javascript" src="./static/js/jquery-1.12.4.min.js"></script>
	<link href="./static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="./static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>
<!-- 搭建显示页面 -->
<div class="container">
	<!-- 标题 -->
	<div class="row">
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>
	</div>
	<!-- 按钮 -->
	<div class="row">
		<div class="col-md-4 col-md-offset-8">
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal" id="emp_add">
			新增
			</button>

			<!-- 新增模态框Modal -->
			<div class="modal fade" id="myModalEmp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">员工添加</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" id="forms">
								<div class="form-group">
									<label for="empName" class="col-sm-2 control-label">empName</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="empName" placeholder="请填写2-12位的用户名" name="empName" onchange="empName_change(this)" >
										<span style="color: red" class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="email" class="col-sm-2 control-label">email</label>
									<div class="col-sm-10">
										<input type="email" class="form-control" id="email" placeholder="Email" name="email" onblur="email_blur(this)">
										<span style="color: red" class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="gender" class="col-sm-2 control-label">gender</label>
									<div class="col-sm-10" id="gender" >
										<label class="radio-inline">
											<input type="radio" name="gender" id="inlineRadio1" value="男" checked> 男
										</label>
										<label class="radio-inline">
											<input type="radio" name="gender" id="inlineRadio2" value="女"> 女
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="department" class="col-sm-2 control-label">deptName</label>
									<div class="col-sm-4" id="department">
										<select class="form-control" name="dId" >
										</select>
									</div>

								</div>

							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" onclick="emp_add_info()">保存</button>
						</div>
					</div>
				</div>
			</div>
			<button class="btn btn-danger" onclick="emp_select_delete()">删除</button>

			<!--编辑模态框Model-->
			<div class="modal fade" id="myModalEmp_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel_edit">员工修改</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" id="forms_edit">
								<div class="form-group">
									<label for="empName" class="col-sm-2 control-label">empName</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="empName_edit" name="empName" value=""  style="border: none;box-shadow: 0px 0px 0px 0px;background: white" readonly >
									</div>
								</div>
								<div class="form-group">
									<label for="email" class="col-sm-2 control-label">email</label>
									<div class="col-sm-10">
										<input type="email" class="form-control" id="email_edit" placeholder="Email" name="email" value="" onblur="email_blur(this)">
										<span style="color: red" class="help-block"></span>
									</div>
								</div>
								<div class="form-group">
									<label for="gender" class="col-sm-2 control-label">gender</label>
									<div class="col-sm-10" id="gender_edit" >
										<label class="radio-inline">
											<input type="radio" name="gender" id="inlineRadio1_edit" value="男" checked> 男
										</label>
										<label class="radio-inline">
											<input type="radio" name="gender" id="inlineRadio2_edit" value="女"> 女
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="department" class="col-sm-2 control-label">deptName</label>
									<div class="col-sm-4" id="department_edit">
										<select class="form-control" name="dId" >
										</select>
									</div>

								</div>

							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" onclick="emp_edit_info()">保存</button>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 显示表格数据 -->
	<div class="row">
		<div class="col-md-12">
			<table class="table table-hover" id="select_emp">

			</table>
		</div>
	</div>

	<!-- 显示分页信息 -->
	<div class="row" id="pages_info">
		<!--分页文字信息  -->
		<div class="col-md-6" id="page_info">当前 第页,总
			页,总 条记录</div>
		<!-- 分页条信息 -->
		<div class="col-md-6" id="page_logo">


		</div>
	</div>

</div>
<script type="text/javascript">
	$(function () {
		methods(1)


	})
	var email_reg=true;
	var empName_reg=false;
	var add_page_count=0;
	function methods(currentPage) {
		$.ajax({
			url:"${pageContext.request.contextPath}/findAll",
			data:"currentPage="+currentPage,
			type:'get',
			success:function (date) {
				emp_info(date)
				pageHelper_info(date)
				pageHelper_logo(date)
				console.log(date)
			}
		})
	}
	//用户信息
	function emp_info(date) {
		var result=date.map.page.list;
		var emp="<tr>\n" +
				"<th>\n" +
				"<input type='checkbox'  id='emp_checked_all'/>\n" +
				"</th>\n" +
				"<th>#</th>\n" +
				"<th>empName</th>\n" +
				"<th>gender</th>\n" +
				"<th>email</th>\n" +
				"<th>deptName</th>\n" +
				"<th>操作</th>\n" +
				"</tr>";
		$.each(result,function (index,items) {
			emp+="<tr>\n" +
										"<th><input type='checkbox' class='checked_item'/></th>\n"+
										"<th>"+items.empId+"</th>\n" +
										"<th>"+items.empName+"</th>\n" +
										"<th>"+items.gender+"</th>\n" +
										"<th>"+items.email+"</th>\n" +
										"<th>"+items.dept.deptName+"</th>\n" +
										"<th><button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\" onclick='emp_edit("+items.empId+","+date.map.page.pageNum+")'>\n" +
													"<span class=\"glyphicon glyphicon-pencil\" aria-hidden=\"true\" ></span>\n" +
													"编辑\n" +
													"</button>\n" +
													"<button class=\"btn btn-danger btn-sm\" onclick='emp_delete("+items.empId+","+date.map.page.pageNum+",\""+items.empName+"\")'>\n" +
													"<span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span>\n" +
													"删除\n" +
											"</button></th>\n" +
									"</tr>"

		})
		$("#select_emp").html(emp)
	}
	//分页文字信息
	function pageHelper_info(date) {
		var result=date.map.page;
		$("#page_info").text("当前第"+result.pageNum+"页,总共"+result.pages+"页,总"+result.total+"条记录");
		add_page_count=result.pageNum;
		/*if((result.total)%2==0){
			add_page_count=result.pages+1;
		}else {
			add_page_count=result.pages;
		}*/

	}

	//分页条信息
	function pageHelper_logo(date) {

		var result=date.map.page;
		var page_logo='<nav aria-label="Page navigation">\n' +
				'<ul class="pagination">'
		//首页
		page_logo+='<li><a onclick="methods(1)">首页</a></li>'
		//上一页
		if(result.hasPreviousPage){
			page_logo+='<li ><a onclick="methods('+(result.pageNum-1)+')" "\n' +
					'aria-label="Previous"> <span aria-hidden="true">&laquo;</span>\n' +
					'</a></li>'
		}else {
			page_logo+='<li class="disabled"><a onclick="methods('+result.pageNum+')" "\n' +
					'aria-label="Previous"> <span aria-hidden="true">&laquo;</span>\n' +
					'</a></li>'
		}

		$.each(result.navigatepageNums,function (index,nums) {


			//页码
			if (result.pageNum==nums){
				page_logo+=('<li class="active"><a onclick="methods('+nums+')">'+nums+'</a></li>')
			}else {
				page_logo+=('<li><a onclick="methods('+nums+')">'+nums+'</a></li>')
			}


		})
		//下一页
		if(result.hasNextPage){
			page_logo+='<li ><a onclick="methods('+(result.pageNum+1)+')" "	\n' +
					'aria-label="Next"> <span aria-hidden="true">&raquo;</span>\n' +
					'</a></li>'
		}else {
			page_logo+='<li class="disabled"><a onclick="methods('+result.pageNum+')" "\n' +
					'aria-label="Next"> <span aria-hidden="true">&raquo;</span>\n' +
					'</a></li>'
		}
		//尾页
		page_logo+='<li><a onclick="methods('+result.pages+')">首页</a></li>'
		page_logo+='</nav>\n'+
				'</ul>'
		$("#page_logo").html(page_logo)

	}

	//员工添加模态框
	$("#emp_add").click(function () {
		//清除表单样式
		reset_form();
		$.ajax({
			type:'post',
			dataType: 'json',
			url:'${pageContext.request.contextPath}/findDept',
			success:function (date) {
				dept_name(date.map);
			}
		})
		$("#myModalEmp").modal({
			backdrop:"static"
		});
	});

	//添加模态框中员工的职称
	function dept_name(data) {
		var depts='<option selected value="0">请选择</option>';
		$.each(data.AllDept,function (index,item) {
			depts+='<option value="'+item.deptId+'">'+item.deptName+'</option>';
		})
		// console.log(depts)
		$("#forms select").html(depts);
	}

	//员工添加
	function emp_add_info() {
		//信息校验
		if(!emp_info_checked()){
			return false;
		}
		$.ajax({
			type:'post',
			dataType: 'json',
			data:decodeURIComponent($("#forms").serialize(),true),
			url:'${pageContext.request.contextPath}/saveEmp',
			success:function (data) {
				if(data.date==1){
					alert('保存成功')
				}else if(data.date==-1){
					alert("用户名或邮箱格式不正确");
				}else {
					alert('保存失败');
				}
				$("#myModalEmp").modal('hide');
			}
		})
		methods(add_page_count);
	}

	//用户名重复检查和校验用户名
	function empName_change(obj){
		var empNames = $(obj).val();
		var regexName = /^[\u4E00-\u9FA5A-Za-z0-9_-]{2,12}$/;
		if(regexName.test(empNames)){

			regex_error_success(obj,"success",null);
			$.ajax({
				type:'post',
				dataType:'json',
				data:"empNames="+$(obj).val(),
				url:'${pageContext.request.contextPath}/checkEmpName',
				success:function (date) {
					if(date.date==0){
						empName_reg=true;
						regex_error_success(obj,"success",null);

					}else {
						empName_reg=false;
						regex_error_success(obj,"error","用户名已存在");
					}
				}
			})

		}else {
			empName_reg=false;
			regex_error_success(obj,"error","请填写2-12位的用户名");
		}

	}

	//校验邮箱
	function email_blur(obj) {
		var email = $(obj).val();
		var regexEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(regexEmail.test(email)){
			email_reg=true
			regex_error_success(obj,"success",null);

		}else {
			email_reg=false
			regex_error_success(obj,"error","请填写正确的邮箱");

		}

	}

	function regex_error_success(obj,regex,regexName) {
		$(obj).parent().removeClass("has-success has-error");
		$(obj).next("span").text("");
		if(regex=="success"){
			$(obj).parent().addClass("has-success");
		}else {
			$(obj).parent().addClass("has-error");
			$(obj).next("span").text(regexName);
		}
	}

	//添加人员信息校验
	function emp_info_checked() {

		// alert(empName_reg)
		if(!empName_reg){
			alert("请填写正确的用户名");
			return false;
		}
		// alert(email_reg)
		if(!email_reg){
			alert("请填写正确的邮箱");
			return false
		}
		if($("#forms select").val()=="0"){
			alert("请选择职称")
			return false;
		}
		if(empName_reg&&email_reg&&($("#forms select").val()!="0")){
			return true;
		}
		return false
	}

	//清除表单样式
	function reset_form() {
		$("#forms")[0].reset();
		$("#forms").find("*").removeClass("has-error has-success");
		$("#forms").find(".help-block").text("");
	}

	//编辑emp
	function emp_edit(id,page_id) {
		//获取编辑部门
		$.ajax({
			type:'post',
			dataType: 'json',
			url:'${pageContext.request.contextPath}/findDept',
			success:function (date) {
				dept_name_adit(date.map);
			}
		})


		$("#myModalEmp_edit").modal({
			backdrop:"static"
		});

		//编辑部门回显
		$.ajax({
			type:'GET',
			dataType:'json',
			url:'${pageContext.request.contextPath}/findEmpById/'+id,
			success:function (data) {
				if(data.status==200){
					console.log(data);
					$("#empName_edit").val(data.map.emp.empName);
					$("#email_edit").val(data.map.emp.email);
					$("#gender_edit input[name='gender']").val([data.map.emp.gender]);
					$("#department_edit select").val([data.map.emp.did]);
					$("#myModalEmp_edit").attr("edit-id",data.map.emp.empId).attr("edit-page-id",page_id);
				}
			}

		})
	}

	//编辑模态框中员工的职称
	function dept_name_adit(data) {
		var depts='';
		$.each(data.AllDept,function (index,item) {
			depts+='<option value="'+item.deptId+'">'+item.deptName+'</option>';
		})
		// console.log(depts)
		$("#forms_edit select").html(depts);
	}

	//校验修改后的邮箱格式
	function adit_email() {
		if(!email_reg){
			alert("请填写正确的邮箱");
			return false
		}else {
			return true;
		}
		return false;
	}

	//保存修改后的用户
	function emp_edit_info() {
		var id=$("#myModalEmp_edit").attr("edit-id");
		var page_id=$("#myModalEmp_edit").attr("edit-page-id");
		if(!adit_email()){
			alert("请填写正确的邮箱")
		}
		$.ajax({
			type:'post',
			dataType:'json',
			url:'${pageContext.request.contextPath}/updateEmp/'+id,
			data:$("#forms_edit").serialize()+"&_method=put",
			success:function (data) {
				if(data.date==1){
					alert("修改成功")
				}else if(data.date==-1){
					alert("邮箱格式不正确");
				}else {
					alert("修改失败");
				}
				$("#myModalEmp_edit").modal('hide');
				methods(page_id);
			}
		})
	}

	//删除单个用户
	function emp_delete(id,page_id,name) {
		if(confirm("你确定要删除"+name+"的信息吗?")!=true){
			return false;
		}
		$.ajax({
			type:'post',
			dataType:'json',
			url:'${pageContext.request.contextPath}/deleteEmp/'+id,
			data:'_method=delete',
			success:function (data) {
				if(data.date==1){
					alert("删除成功");
				}else {
					alert("删除失败")
				}
				methods(page_id);
			}
		})

	}
	//删除全选或全不选
	$(document).on("click","#emp_checked_all",function () {
		$(".checked_item").prop("checked",$(this).prop("checked"))
	});
	//数据列中复选框选满后  全选会自动选上
	$(document).on("click",".checked_item",function () {
		if($(".checked_item:checked").length==2){
			$("#emp_checked_all").prop("checked",true);
		}else {
			$("#emp_checked_all").prop("checked",false);
		}
	});


	//批量删除
	function emp_select_delete() {
		var empNames="";
		var empIds="";
		$.each($(".checked_item:checked"),function () {
			empNames+=$(this).parents("tr").find("th:eq(2)").text()+",";
			empIds+=$(this).parents("tr").find("th:eq(1)").text()+"-";
		})
		empNames=empNames.substr(0,empNames.length-1)
		empIds=empIds.substr(0,empIds.length-1)
		if(empNames.length==0){
			alert("请先勾选要删除的用户信息");
		}
		if(!confirm("你确定要删除["+empNames+"]这些用户信息吗？")){
			return false;
		}
		$.ajax({
			type:'post',
			dataType:'json',
			url:'${pageContext.request.contextPath}/deleteBatch/'+empIds,
			data:'_method=delete',
			success:function (data) {
				if(data.date==0){
					alert("删除失败")
				}else if(data.date==-1){
					alert("请先勾选要删除的用户信息");
				}else {
					alert("删除成功");
				}

			}
		})
		methods(add_page_count);

	}






</script>
</body>
</html>